<!DOCTYPE html>
<html>
<head>
<title>website router</title>
<style>
    body {
        width: 35em;
        margin: 0 auto;
        font-family: Tahoma, Verdana, Arial, sans-serif;
    }
</style>
</head>
<body>
<h1>Welcome to nginx!</h1>
<p>If you see this page, the nginx web server is successfully installed and
working. Further configuration is required.</p>
<p>For online documentation and support please refer to
<a href="http://nginx.org/">nginx.org</a>.<br/>
Commercial support is available at
<a href="http://nginx.com/">nginx.com</a>.</p>
<p><em>Thank you for using nginx.</em></p>
<script type="text/javascript">
    // 按字母顺序排序 需要和 nginx conf 配置port一致 构建工具
    const plugins = [
        'vue-cli',
		'vitejs',
		'webpack',
		'eslint',
		'babeljs',
		'prettier',
		'vector-icons'
    ];
    
    // web 组件
    const routes = [ 
        'expo',
        'react',
        'react-native',
		'react-navigation',
        'react-native-elements',
        'v2.vuejs',
        'vuejs',
        'vue-router',
        'vuex',
        'element-ui',
		'typescript',
		'vitepress',
		'axios',
		'pinia',
		'sass',
		'vueuse',
		'echarts',
		'vuejs-zh',
		'element-plus',
		'react-native-paperr',
		'react-native-calendar',
        'dayjs'
		
    ];
    
    document.body.onload = function () {
        // body...
        document.write(`
            <form>
                <fieldset>
                    <legend><h1>构建工具</h1></legend>
                    <div style="display: grid">
                        ${plugins.map(function(elem, index){
                            const column = +index % 4 + 1
                            const row = Math.floor(+index / 4) + 1
                            return `
                                <div style="grid-column： ${column};grid-row: ${row}">
                                    <a href="javascript:window.open('http://localhost:${+index + 8100}');">
                                        <h2>${elem}</h2>
                                    </a>
                                </div>`
                        }).join('')}
                    </div>
                </fieldset>
                <fieldset>
                    <legend><h1>DevOps</h1></legend>
                    <div style="display: grid">
                        ${routes.map(function(elem, index){
                            const column = +index % 4 + 1
                            const row = Math.floor(+index / 4) + 1
                            return `
                                <div style="grid-column： ${column};grid-row: ${row}">
                                    <a href="javascript:window.open('http://localhost:${+index + 8200}');">
                                        <h2>${elem}</h2>
                                    </a>
                                </div>`
                        }).join('')}
                    </div>
                </fieldset>
            </form>
            `)
        
    }
</script>
</body>
</html>
